<script setup>

// 初始化书籍数据
import {computed} from "vue";
import {Right} from "@element-plus/icons-vue";
import DefaultAvatar from "@/assets/img/Book/417-300x400.jpg"
import router from "@/router/index.js";
const props = defineProps({
  BookListData: {
    type: Array,
    default:  [{
      id: 1,
      imageSrc: "default-avatar",
      title: "JavaScript高级程序设计",
      intro: "本书从JavaScript语言实现的各个组成部分——语言核心、DOM、BOM、事件模型等方面全面、深入地探讨了JavaScript编程，并详细介绍了JavaScript的各个版本，包括ECMAScript 5和HTML5中新增的特性。",
      category: "计算机科学",
      author: "Matt Frisbie",
      publisher: "人民邮电出版社",
      score: 4.8
    }]
  }
});
// 计算属性：根据分类和搜索词过滤书籍
const filteredBooks = computed(() => {
  return props.BookListData
})

const viewBook = (book) => {
  // 获取 路由并 跳转到书籍详情页面
  router.push({
    path: '/Books/'+book.id,
  })
}

</script>

<template>
  <el-card
      v-for="book in filteredBooks"
      :key="book.id"
      class="book-card">
    <div class="card-header">
      <div class="book-title">{{ book.title }}</div>
      <div class="book-score">
        <el-rate
            disabled
            v-model="book.score"
            show-score
            text-color="#ff9900">
        </el-rate>
      </div>
    </div>
    <div class="book-content">
      <img :src="book.imageSrc === 'default-avatar'?DefaultAvatar:book.imageSrc" alt="书籍封面" class="book-cover">
      <div class="book-info">
        <div class="book-category">
          <el-tag type="info">{{ book.category }}</el-tag>
        </div>
        <div class="book-meta">
          <p ><span class="meta-label">作者:</span> {{ book.author }}</p>
          <p><span class="meta-label">出版社:</span> {{ book.publisher }}</p>
        </div>
        <div class="book-intro">
          <p>{{ book.intro.length > 100 ? book.intro.substring(0, 100) + '...' : book.intro }}</p>
        </div>
        <div class="book-actions">
          <el-button type="primary" size="small" @click="viewBook(book)">
            查看详情 <el-icon><Right /></el-icon>
          </el-button>
<!--          <router-link :to="'/Books/'+book.id">-->
<!--            查看详情 <el-icon><Right /></el-icon>-->
<!--          </router-link>-->
        </div>
      </div>
    </div>
  </el-card>
</template>

<style scoped>
.book-actions {
  display: flex;
  justify-content: right;
}


.book-card {
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 16px;
  border-bottom: 1px solid #ebeef5;
  border-radius: 8px 8px 0 0;
}

.book-card:hover {
  transform: translateY(-5px);
}

.book-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.book-score {
  display: flex;
  align-items: center;
}

.book-content {
  margin-top: 5px;
  display: flex;
  flex-direction: row;
  height: 240px;
}

.book-cover {
  width: 150px;
  height: 100%;
  object-fit: cover;
  border-radius: 0 0 0 8px;
}

.book-info {
  flex: 1;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.book-category {
  margin-bottom: 10px;
}

.book-meta {
  margin-bottom: 5px;
  font-size: 14px;
  color: #606266;
}
.book-meta p{
  margin-bottom: 10px;
  margin-top: 0;
}
.meta-label {
  font-weight: 500;
  color: #909399;
  margin-right: 5px;
}

.book-intro {
  flex: 1;
  margin-bottom: 10px;
  font-size: 14px;
  color: #606266;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;/*
  -webkit-line-clamp: 3;*/
  -webkit-box-orient: vertical;
}
.book-intro p{
  margin-bottom: 5px;
  margin-top: 5px;
}
/* 响应式布局 */
@media (max-width: 768px) {

  .book-content {
    margin-top: 5px;
    flex-direction: column;
    height: auto;
  }

  .book-cover {
    width: 100%;
    height: 200px;
    border-radius: 0;
  }
}
</style>